<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">   
<script type="text/javascript" src="easyui/jquery.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
</head>
<!-- 
标签：
声明控件：class="easyui-控件名"，例如：class="easyui-dialog"
控件属性：data-options="属性名:'属性值',属性名:'属性值'"，例如：data-options="iconCls:'icon-save',resizable:true
控件事件：data-options="属性名:'属性值',事件名:function(){}"，
Js:
声明控件：$(选择器).控件名({
  属性名：属性值，
   属性名：属性值，
  事件名：function(){},
   事件名：function(){}
});

如何调用控件已有的方法：
 $(选择器).控件名("方法名", "方法参数");
 $(选择器).控件名("方法名", {参数名：参数值，参数名：参数值 });
 -->
 <script type="text/javascript">
   function addPanel(){
		// 添加一个未选中状态的选项卡面板
	   $('#tt').tabs('add',{
	   	title: '新选项卡面板',
	   	content:"这是内容",
	   	selected: false
	   	
	   });
   }
 

   $(function (){
	   $('#tt').tabs({
			tools:[{
				iconCls:'icon-add',
				handler:function(){
					
					alert('添加');
				}
			},{
				iconCls:'icon-save',
				handler:function(){
					alert('保存');
				}
			}],
			toolPosition:'left'
		});
	   
  }); 
 </script>
<body>
<div id="tt" class="easyui-tabs"  style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>  
<input type="button" value="add" onclick="addPanel()">
</body>
</html>